<!--
 * @Author: your name
 * @Date: 2022-01-20 18:48:41
 * @LastEditTime: 2022-01-20 23:17:16
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \json-serveg:\桌面2\VueStudy\vue-test4\vue-eqidemic\src\components\SearchCity\SearchCity.vue
-->

<template>
  <div class="selectCity" >
      <h2 class="title">城市选择</h2>
      
      <van-index-bar :index-list="indexList">
        <template v-for="(item,value) in cityDate">
          <van-index-anchor :index="value" :key="value"/>
          <template v-for="ele in item">
            <van-cell :title="ele.name"  :key="ele.id" @click="cityName"/>
          </template>
          
          
        </template>


      
      </van-index-bar>


  </div>
</template>

<script>
import api from '../../api/index'
import bus from '../../utils/eventBus'
export default {
    name:'SearchCity',
    data() {
      return {
        cityDate:{},
        indexList: [],
        city:''
      }
    },
    created() {
      api.getCityData().then((params) => {
        // console.log(params.data)
        this.cityDate = params.data.result.citylist
        //获取右侧的索引
        this.indexList = Object.keys(params.data.result.citylist)
      })
    },
    methods: {
      cityName(event){
        // console.log(event.target.innerText);
        this.city = event.target.innerText
       
        this.$router.go(-1)
      }
    },
    destroyed() {
      bus.$emit('cityDateList',this.city)
    },
}
</script>

<style scoped>
.selectCity {
  background: #f5f5f5;
  }
.title{
  padding: 0.2rem;
}
</style>
